import React from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    SmileOutlined,
    // UserOutlined
} from '@ant-design/icons';

import { Layout, Button, theme, Dropdown, Space, Avatar } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
const { Header } = Layout;


function TopHeader(props) {
    const changeCollapsed = () => {
        props.changeCollapsed()
    }
    // const tokenUserInfo = JSON.parse(localStorage.getItem("token"))
    const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const items = [
        {
            key: '1',
            label: (
                <div>{roleName}</div>
            ),
        },
        {
            key: '2',
            label: (
                <div onClick={() => {
                    localStorage.removeItem("token")
                    console.log(props);
                    props.history.replace("/login")
                    // props.history.push("/login")
                }}>退出</div>
            ),
            danger: true,
            icon: <SmileOutlined />,
        },
    ];
    return (
        <Header
            style={{
                padding: 16,
                background: colorBgContainer,
                height: "80px"
            }}
        >
            {/* {
                props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
            } */}
            <Button
                type="text"
                icon={props.isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={changeCollapsed}
                style={{
                    float: 'left',
                    fontSize: '16px',
                    width: 64,
                    height: 64,
                }}
            />
            <div style={{ float: 'left', fontSize: '20px', fontWeight: '700', }}>全球新闻发布后台管理系统</div>
            <div style={{ float: 'right' }}>
                <span style={{ marginRight: "15px" }}>
                    <span>欢迎 <span style={{ color: "#1890ff" }}> {username} </span>回来</span>
                </span>
                <Dropdown menu={{ items }}>
                    <a onClick={(e) => e.preventDefault()} href="#">
                        <Space>
                            {/* <Avatar size={45} icon={<UserOutlined />} style={{ color: "#1677ff", backgroundColor: "#8cdcfe" }} /> */}
                            <Avatar size={45} src={require("../../assets/img/123.jpeg")} />
                        </Space>
                    </a>
                </Dropdown>
            </div>
        </Header>
    )
}

const mapStateToProps = ({ CollapsedReducer: { isCollapsed } }) => {
    return {
        isCollapsed
    }
}

const mapDispatchToProps = {
    changeCollapsed() {
        return {
            type: "change_collapsed"
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TopHeader))